<template>
    <div>
        <el-page-header icon="" content="个人中心" title=" "></el-page-header>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover">
                    <el-avatar :src="avatarUrl" :size="100" />
                    <h3>{{ store.state.userInfo.username }}</h3>
                    <h5>{{ store.state.userInfo.role === 1 ? "管理员" : "编辑" }}</h5>
                </el-card>
            </el-col>

            <el-col :span="16">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <el-form ref="userFormRef" style="max-width: 600px" status-icon :model="userForm"
                        :rules="userFormRules" label-width="auto" class="demo-ruleForm">

                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="userForm.username" />
                        </el-form-item>

                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="userForm.gender" style="width: 150px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="个人简介" prop="introduction">
                            <el-input v-model="userForm.introduction" type="textarea"/>
                        </el-form-item>

                        <el-form-item label="头像" prop="avatar">
                            <Upload :avatar = "userForm.avatar" @fileChange="handleChange"></Upload>
                        </el-form-item>

                        <el-form-item class="label">
                            <el-button type="primary" @click="submitForm()" style="margin: 0 auto;">更新</el-button>
                        </el-form-item>

                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
import upload from '@/util/upload';
import Upload from '@/components/upload/Upload.vue'

const store = useStore()
const userFormRef = ref()

const avatarUrl = computed(() => store.state.userInfo.avatar ? 'http://localhost:3000' + store.state.userInfo.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')


const { username, gender, introduction, avatar } = store.state.userInfo
const userForm = reactive({
    username,
    gender,
    introduction,
    avatar,
    file:null
})

const userFormRules = reactive({
    username: [
        { required: true, message: '输入名字', trigger: 'blur' },
    ],
    gender: [
        { required: true, message: '选择性别', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '输入介绍', trigger: 'blur' },
    ],
    avatar: [
        { required: true, message: '上传头像', trigger: 'blur' },
    ],
})

const options = [
    {
        label: "保密",
        value: 0
    },
    {
        label: "男",
        value: 1
    },
    {
        label: "女",
        value: 2
    }
]

//选择完头像后的回调
const handleChange = (file) =>{
    userForm.avatar = URL.createObjectURL(file)
    userForm.file = file
} 

const submitForm = ()=>{
    userFormRef.value.validate(async (valid)=>{
        if(valid){
            const res = await upload('/adminapi/user/upload',userForm)
            if(res.ActionType === 'OK'){
                store.commit("changeUserInfo",res.data)
                ElMessage.success("更新成功")
            }
            // console.log(params)
        }
    })
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-top: 20px;

    .el-card {
        text-align: center;
    }
}
</style>